<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Pagination</title>

  <link rel="stylesheet" type="text/css" href="/bower_components/bootstrap/dist/css/bootstrap.min.css" />

  <!--<script src="/bower_components/vue/dist/vue.min.js"></script>-->
</head>
<body>

<div id="app">
  <pagination :pagination="pagination" :callback="loadData" :options="paginationOptions"></pagination>
</div>


</body>
</div>

</body>
<script type="text/javascript" src="vue-bootstrap-pagination-bundler.js"></script>

<script>
  new Vue({
    el: '#app',
    data: function(){
      return {
        items: [],
        pagination: {
          total: 0,
          per_page: 12,    // required
          current_page: 1, // required
          last_page: 0,    // required
          from: 1,
          to: 12           // required
        },
        paginationOptions: {
          offset: 4,
          previousText: 'Prev',
          nextText: 'Next',
          alwaysShowPrevNext: true
        }
      }
    },
    methods: {
      loadData : function () {
        let options = {
          params: {
            paginate: this.pagination.per_page,
            page: this.pagination.current_page,
            /* additional parameters */
          }
        };
        this.$http.get('/getData', options).then(response => {
          this.items = response.data.data;

        // Overwrite pagination object
        this.pagination = response.data.pagination; // API response edited to have pagination data under pagination object

        // Or overwrite only values
        /*
         this.pagination.current_page = response.data.current_page;
         this.pagination.last_page = response.data.last_page;
         ...
         */
      }, error => {
          // handle error
        });
      }
    }
  })
</script>
</html>